<template>
  <div class="app-container">
    <el-row type="flex" style="justify-content: space-between"
      >
      <div style="flex: 1; min-width: 0; margin-right: 5px">
        <storage-customer-info :value="detailInfo" v-if="detailInfo.carOutStorage.purchaseSource !== 6"></storage-customer-info>
        <storage-out-car-info :value="detailInfo" v-if="detailInfo != null && detailInfo.carOutStorage != null && detailInfo.carOutStorage.purchaseSource != null && detailInfo.carOutStorage.purchaseSource !== 6"></storage-out-car-info>
        <div v-if="detailInfo.carOutStorage.purchaseSource == 6">
          <leaseContract state="detail" v-model="detailInfo" />
          <carReplacementService state="detail" v-model="detailInfo" />
          <vehicleInformationZD state="detail" v-model="detailInfo" />
        </div>
        <storage-out-inventory-info :value="detailInfo" v-if="detailInfo.carOutStorage"></storage-out-inventory-info>
      </div>
      <FlowRecord v-if="flowId" :id="flowId" :customStyle="{ minWidth: '280px', marginBottom: '20px' }" />
    </el-row>

    <div class="card-wrap flex justify-end card-padding">
      <el-button @click="back">返回</el-button>
    </div>
  </div>
</template>

<script>
import StorageCustomerInfo from '@/views/carInventory/components/StorageCustomerInfo.vue'
import StorageOutCarInfo from '@/views/carInventory/components/StorageOutCarInfo.vue'
import StorageOutInventoryInfo from '@/views/carInventory/components/StorageOutInventoryInfo.vue'
import * as outInventoryApi from '@/api/carInventory/outInventory'
import leaseContract from '@/views/carInventory/components/leaseContract.vue'
import carReplacementService from '@/views/vehicleOrder/suborderManagement/components/carReplacementService.vue'
import vehicleInformationZD from '@/views/vehicleOrder/suborderManagement/components/vehicleInformationZD.vue'
export default {
  components: { StorageOutCarInfo, StorageOutInventoryInfo, StorageCustomerInfo, leaseContract, carReplacementService, vehicleInformationZD },
  props: {},
  data() {
    return {
      detailInfo: { carOutStorage: { purchaseSource: null } },
      flowId: null,
    }
  },
  computed: {},
  methods: {
    // 获取入库单详情
    getDetail() {
      outInventoryApi.outStorageDetails(this.$route.query.id).then((res) => {
        this.flowId = res.data?.carOutStorage?.flowId
        this.detailInfo = { ...res.data, inboundId: this.$route.query.inboundId }
        console.log(this.detailInfo)
      })
    },
    back() {
      this.$router.back()
    },
  },
  created() {
    this.getDetail()
  },
}
</script>

<style lang="scss" scoped>
::v-deep .el-form--label-top .el-form-item__label {
  padding: 0;
}

.el-form-item {
  margin-bottom: 15px;
  width: 70%;
}
</style>
